<template>
  <div id="paperPreview">
    <el-scrollbar style="height: 100%">
      <div class="previewTitle">{{ '(' + paperInfo.testCode + ')' + paperInfo.testTitle }}</div>
      <div class="previewBody">
        <div class="paperScoreTime">
          <span class="paperTotolScores">总分：{{ paperInfo.totalScore }}</span>
          <span class="paperTime">考试时长：{{ paperInfo.duration }} 分钟</span>
        </div>
        <div class="paperAttention">
          <span class="attentionTitle">注意事项：</span>
          <div class="attentionContent">
            {{ paperInfo.remake }}
          </div>
        </div>
        <div class="paperQuestion">
          <div class="questionBigItem" v-for="bigItem in paperInfo.wkTestBigList" :key="bigItem.id">
            <div class="paperQuestionBigTitle">{{ bigItem.title }}：{{ bigItem.description ? bigItem.description : '' }}</div>
            <div class="paperQuestionSmallItem" v-for="smallItem in bigItem.testSmallList" :key="smallItem.id">
              <div class="smallItemTitle">{{ smallItem.seq + '. ' + smallItem.questionName }}</div>
              <div v-if="smallItem.questionType === 'single' || smallItem.questionType === 'multiple' || smallItem.questionType === 'judge'">
                <div class="smallItemOptionVfor" v-for="option in smallItem.wkTestOptions" :key="option.id">
                  <div v-if="smallItem.questionType === 'judge'">
                    {{ option.optionContent }}
                  </div>
                  <div v-else>
                    {{ option.optionValue + '.' + option.optionContent }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息

let { proxy }: any = getCurrentInstance();
defineExpose({ getPaperView });

let paperInfo = reactive({
  id: '',
  testCode: '',
  testTitle: '',
  startDate: '',
  endDate: '',
  totalScore: '',
  status: 0,
  seq: 0,
  sysUserList: [],
  remake: '',
  wkTestBigList: []
});

// 题目类型字典选项数组
let subjectTypeOption = reactive([]);
// 方法定义区 =============================================================
onMounted(() => {
  getDictItemsList();
});

// 试卷预览
function getPaperView(currenPaperInfo: any) {
  const url = '/wk/test/paper/getPaperView';
  proxy.$http
    .get(url, { params: { paperId: currenPaperInfo.id } })
    .then((res: any) => {
      if (res.data) {
        Object.assign(paperInfo, res.data);
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

//批量获取字典
async function getDictItemsList() {
  let dictTreeTypeCodes: any = ['question'];
  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const qcRuleType = dictTreeTypeItems.data.find((item) => item.code === 'question');
  subjectTypeOption.push(...qcRuleType.detailDataList);
}
function formatterType(subjectType: any) {
  const item = subjectTypeOption.find((item) => item.code === subjectType);
  return item ? item.name : '';
}
</script>

<style lang="scss" scoped>
#paperPreview {
  height: 100%;
  :deep(.el-scrollbar__view) {
    height: 100%;
    .previewTitle {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }
    .previewBody {
      padding: 20px;
      height: calc(100% - 26px - 40px);
      .paperScoreTime,
      .paperAttention {
        font-size: 15px;
        font-weight: 600;
        margin: 10px;
        .paperTotolScores {
          margin: 10px;
        }
        .paperTime {
          margin: 10px;
        }
        .attentionTitle {
          margin: 10px;
        }
        .attentionContent {
          font-weight: 400;
          margin: 10px;
        }
      }
      .paperQuestion {
        margin: 25px;
        .questionBigItem {
          margin: 10px 0;
          .paperQuestionBigTitle {
            font-size: 15px;
            font-weight: 600;
            margin: 10px 0;
          }
          .paperQuestionSmallItem {
            font-size: 15px;
            .smallItemTitle {
              margin: 5px 10px;
            }
            .smallItemOptionVfor {
              margin: 5px 20px;
            }
          }
        }
      }
    }
  }
}
</style>
